<!-- @module message-panel -->
<!-- @author: YunTao.Li -->
<!-- @description:  -->
<!-- @since: 2020-03-19 18:16:52 -->
<template>
  <el-container style="height:100%;">
    <el-container>
      <el-aside style="width:270px;margin:0">
          <el-table
            class="apptable"
            :data="appList"
            highlight-current-row
            style="width: 100%;"
            max-height="560"
            @row-click="queryMessageByApp"
            :show-header="false"
          >
            <!--icon-->
            <el-table-column width="75px" align="right">
              <template slot-scope="scope">
                <span style="font-size:40px;">
                  <!-- <i :class="scope.row.appIcon" /> -->
                  <svg-icon :icon-class="scope.row.appIcon" />
                </span>
              </template>
            </el-table-column>
            <!--appName-->
            <el-table-column align="left">
              <template slot-scope="scope">
                <span>{{ scope.row.appName }}</span>
                <p><span class="appDesc">{{ scope.row.nearestMsgTitle }}</span></p>
              </template>
            </el-table-column>
            <!--appCount-->
            <el-table-column width="50px" align="center">
              <template slot-scope="scope">
                <el-badge :value="scope.row.unreadMsgCount" class="item" />
              </template>
            </el-table-column>
          </el-table>
      </el-aside>

      <!-- main -->
      <el-main>
        <el-form ref="msgQueryForm" label-width="120px" class="div-header" :model="msgQueryForm" size="mini">
          <el-row type="flex" justify="end">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="msgTitle">
                <el-input v-model="queryForm.msgTitle" placeholder="请输入关键字搜索" clearable @input="messageTitleChange" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          v-loading="listLoading"
          :data="messageList"
          border
          fit
          highlight-current-row
          style="width: 100%"
          max-height="500"
          :row-class-name="tableRowClassName"
          @row-dblclick="messageDetailToggle"
        >
          <el-table-column type="index" width="50" label="序号" fixed />
          <!--发件人-->
          <el-table-column width="100px" align="center" label="发件人" fixed>
            <template slot-scope="scope">
              <span>{{ scope.row.mcFrom }}</span>
            </template>
          </el-table-column>
          <!--标题-->
          <el-table-column align="center" label="标题" fixed>
            <template slot-scope="scope">
              <span>{{ scope.row.mcTitle }}</span>
            </template>
          </el-table-column>
          <!--发送时间-->
          <el-table-column width="170px" align="center" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.mcSendtime }}</span>
            </template>
          </el-table-column>
          <!--操作-->
          <el-table-column width="80px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="messageDetailToggle(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="msgQueryForm.page" :limit.sync="msgQueryForm.limit" @pagination="getMessageList" />
      </el-main>
      <!--main end-->
      <messageDetail ref="messageDetailDialog" @submitFunc="refreshMenu" />
    </el-container>
  </el-container>
</template>

<script>
import { appInfoList } from '@/api/message/app-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { messageInfoList, messageUpdate } from '@/api/message/message-service'
import messageDetail from '@/views/message/component/messageDetailBox'
import Vue from 'vue'

export default {
  components: { messageDetail, Pagination },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '消息信息',
      appList: [],
      total: 0,
      param_empcode: '',
      messageList: [],
      listLoading: true,
      queryForm: {
        page: 1,
        limit: 50,
        msgTitle: '',
        msgTo: '',
        startDate: null,
        endDate: null
      }, inputRules: {
      },
      msgQueryForm: {
        page: 1,
        limit: 10,
        msgTitle: '',
        msgTo: '',
        appCode: 'app_task'
      }
    }
  },
  created() {
    // 获得applist
    this.getList()

    // 获得messageList
    this.getMessageList()

    this.param_empcode = this.$route.query.empcode
  },
  mounted() {
    if (this.param_empcode && this.param_empcode !== '') {
      this.msgQueryForm.msgTo = this.param_empcode
      this.queryForm.msgTo = this.param_empcode
      return
    }

    const empcode = localStorage.getItem('empCode')
    if (!empcode || empcode === '') {
      Vue.prototype.loginUser()
    }

    if (empcode) {
      this.msgQueryForm.msgTo = empcode
      this.queryForm.msgTo = empcode
    } else {
      this.msgQueryForm.msgTo = 'sysadmin1'
      this.queryForm.msgTo = 'sysadmin1'
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      appInfoList(this.queryForm).then(response => {
        this.appList = response.data.records

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    getMessageList() {
      this.listLoading = true
      messageInfoList(this.msgQueryForm).then(response => {
        this.messageList = response.data.records
        this.total = response.data.total
        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    messageDetailToggle(row) {
      const messageStatus = row.mcStatus
      if (messageStatus !== 2) {
        row.mcStatus = 2
        messageUpdate(row.mcId, row)
      }

      this.$refs.messageDetailDialog.toggele(row)
    },
    tableRowClassName(row) {
      const msgObject = row.row
      const msgStatus = msgObject.mcStatus
      if (msgStatus === 2) {
        return ''
      }
      return 'message-unread'
    },
    refreshMenu() {
      this.getList()
    },
    queryMessageByApp(row) {
      this.msgQueryForm.appCode = row.appCode
      this.getMessageList()
    },
    messageTitleChange(value) {
      this.msgQueryForm.msgTitle = value
      this.getMessageList()
    }
  }
}
</script>

<style scoped>
.el-table .message-unread {
  font-weight: bolder;
  }
  .el-aside {
    background:#ffffff;
      padding: 5px;
      margin: 5px;
}
.el-table__header{
    font-size: 10px;
}
.apptable{
    font-size: 18px;
    font-weight: bold
}
.el-aside{
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.el-main{
  background: #fff;
  margin-left: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.appDesc{
    font-size: 15px;
    font-weight:normal
}
.div-body{
  margin-top: 5px;
}
.div-header{
  font-size: 12px
}
.el-form-item__label{
  font-size: 12px
}
element.style{
  padding-top: 0px;
}
p{
    padding: 0px;
    margin: 0px;
}
fieldset {
    display: block;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(200, 202, 204);
    border-image: initial;
}
div.popContainer{
    position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        color: white;
}
</style>
